<template>
    <view>
        <view class="tab-top">
            <!-- <view :class="active === 0 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 0">全部</view>
            <view :class="active === 1 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 1">拼单中</view>
            <view :class="active === 2 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 2">拼团成功</view>
            <view :class="active === 3 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 3">拼团失败</view> -->
            <block v-for="(item, index1) in orderStatus" :key="index1">
                <view :class="active === index1 ? 'tab-top-item active' : 'tab-top-item'" @click="clickChangeSwiper(index1)">{{item}}</view>
            </block>
        </view>
        <view class="content">
            <swiper :current="active" @change="swiperChange" class="swiper">
                <block v-for="(item, index) in orderStatus" :key="index">
                    <swiper-item>
                        <scroll-view style="height:100%" scroll-y @scrolltolower="scrollHandle">
                            <block v-for="(item, index2) in groupBuyList" :key="index2">
                                <view class="order-item">
                                    <view class="order-title" v-if="item.order_status == 1">
                                        <view class="order-time">剩余时间：
                                            <uni-countdown :show-day="false" :hour="item.hour" :minute="item.minute" :second="item.second" :reset="reset"  color="#333" background-color="#fff" splitor-color="#333"></uni-countdown>
                                        </view>
                                        <view class="order-type">拼团中，还剩{{item.total_number - item.join_number}}人</view>
                                    </view>
                                    <view class="order-title-text" v-if="item.order_status == 2"><text style="color:#333333">拼团成功</text></view>
                                    <view class="order-title-text" v-if="item.order_status == 3"><text style="color:#FFC960">拼团失败</text></view>
                                    <view class="order-info">
                                        <view class="order-img">
                                            <img :src="item.commodity_image_thum" alt="" style="width:100%;height:100%">
                                        </view>
                                        <view class="order-info-right">
                                            <view class="order-name">{{item.spu_name}}</view>
                                            <view class="order-price">
                                                <view style="color:#FF1E1E;font-size:36rpx">￥{{item.original_price}}</view>
                                                <view style="display:flex">
                                                    <i class="iconfont icon-chenghao" style="color:#333333;line-height:40rpx"></i>
                                                    <text style="color:#666666;font-size:28rpx">{{item.number}}</text>
                                                </view>
                                            </view>
                                            <view class="order-text">共{{item.number}}件商品，合计￥{{item.total_price}}（含运费）</view>
                                        </view>
                                    </view>
                                    <view class="order-handle" v-if="item.order_status == 1">
                                        <button class="pay" open-type="share" style="margin:0;background:#fff;width:148rpx;padding:0rpx">邀请好友</button>
                                        <view class="canel-order" @tap="goGroupDetail(item.id)">拼团详情</view>
                                        <!-- <view class="pay" @click="invitePeople">邀请好友</view> -->
                                    </view>
                                    <view class="order-handle" v-if="item.order_status == 2">
                                        <view class="canel-order" @tap="goGroupDetail(item.id)">拼团详情</view>
                                    </view>
                                    <view class="order-handle" v-if="item.order_status == 3">
                                        <view class="pay">退款中</view>
                                        <view class="canel-order" @tap="goGroupDetail(item.id)">拼团详情</view>
                                    </view>
                                </view>
                            </block>
                        </scroll-view>
                    </swiper-item>
                </block>
            </swiper>
        </view>
        <noOrder :showNoOrder="showNoOrder"></noOrder>
    </view>
</template>
    
<script>
import { OrderModel } from '../../model/order'
import uniCountdown  from "../../components/linnian-CountDown/uni-countdown"
import noOrder from '../../components/no-order/no-order'
const orderModel = new OrderModel()
export default {
    components: {
        uniCountdown,
        noOrder
    },
    data() {
        return {
            orderStatus: ["全部", "拼单中", "拼团成功", "拼团失败"],
            active: 0,
            page: 1,
            size: 10,
            groupBuyList: [],
            reset: false,
            showNoOrder: false
        }
    },
    onLoad() {
        this.reset = false
        this._getGroupBuyOrder()
    },
    onShareAppMessage(res) {
        return{
            title: '农乎',
            path: '/pages/index/index'
        }
    },
    methods: {
        clickChangeSwiper(index) {
            console.log(index)
            this.active = index
        },
        swiperChange(e) {
            this.active = e.detail.current
            this.groupBuyList = []
            this.page = 1
            this._getGroupBuyOrder()
        },
        scrollHandle() {
            if(this.flag == true) {
                this.page = this.page + 1
                this._getGroupBuyOrder()
            }
        },
        _getGroupBuyOrder() {
            let data = {
                order_status: this.active,
                page: this.page,
                size: this.size
            }
            orderModel.getGroupBuyOrder(data).then((res) => {
                if(res.code == 200) {
                    this.groupBuyList = this.groupBuyList.concat(res.data)
                    res.data.length == 0 ? this.flag = false : this.flag = true
                    if(this.groupBuyList.length == 0) {
                        this.showNoOrder = true
                    }else {
                        this.showNoOrder = false
                    }
                    this.groupBuyList.map((item) => {
                        if(new Date(item.failure_time).getTime() > new Date().getTime()) {
                            let dateInterval = (new Date(item.failure_time).getTime() - new Date().getTime())/1000
                            item.hour = Math.floor((dateInterval / 3600) % 24)
                            item.minute = Math.floor((dateInterval / 60) % 60)
                            item.second = Math.floor(dateInterval % 60)
                        }
                    })
                }
            })
        },
        goGroupDetail(id) {
            uni.navigateTo({
                url: '/pagesA/group-buying-detail/group-buying-detail?id=' + id
            })
        },
        invitePeople() {
            uni.share({
                provider: 'weixin',
                scene: 'WXSceneSession',
                type: 5,
                title: '农乎',
                imageUrl: 'http://qiniu.quanyubao.cn/logo.png',
                miniProgram: {
                    id: 'gh_58835c3bb0aa',
                    path: 'pages/index/index',
                    type: 0
                }
            })
        }
    }
}
</script>

<style>
    .uni-countdown__number {
        border: none !important;
    }
    .tab-top {
        height: 85rpx;
        background: rgba(255,255,255,1);
        color: #333333;
        font-size: 30rpx;
        font-weight: 500;
        line-height: 85rpx;
        padding: 0 55rpx;
        display: flex;
        justify-content: space-between;
    }
    .active {
        color: #24C79C;
    }
    .content {
        height: 1362rpx;
    }
    .swiper {
        width: 100%;
        height: 100%;
    }
    .order-item {
        width: 620rpx;
        height: 320rpx;
        margin: 20rpx auto 0;
        padding: 22rpx 27rpx;
        background:rgba(255,255,255,1);
        border-radius:10px; 
    }
    .order-item:last-child {
        margin-bottom: 156rpx;
    }
    .order-title {
        display: flex;
        justify-content: space-between;
    }
    .order-title-text {
        text-align: right;
    }
    .order-time {
        color: #333333;
        font-size: 24rpx;
        font-weight: 500;
    }
    .order-type {
        color: #FF1E1E;
        font-size: 28rpx;
        font-weight: 500;
    }
    .order-info {
        display: flex;
        justify-content: left;
        margin-top: 36rpx;
    }
    .order-img {
        width: 198rpx;
        height: 198rpx;
    }
    .order-info-right {
        margin-left: 30rpx;
    }
    .order-name {
        width: 247rpx;
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
        overflow: hidden;
        text-overflow:  ellipsis;
        white-space: nowrap;
    }
    .order-price {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
    }
    .order-text {
        color: #999999;
        font-size: 24rpx;
        margin-top: 31rpx;
    }
    .order-handle {
        display: flex;
        justify-content: flex-end;
    }
    .canel-order {
        width: 148rpx;
        height: 46rpx;
        border: 1rpx solid rgba(229,229,229,1);
        border-radius: 23rpx;
        color: #999999;
        font-size: 28rpx;
        font-weight:500;
        text-align: center;
        line-height: 46rpx;
        margin-left: 25rpx;
    }
    .pay {
        height: 50rpx;
        border: 1rpx solid rgba(36,199,156,1);
        border-radius: 23rpx;
        font-weight:500;
        font-size: 28rpx;
        color:rgba(36,199,156,1);
        text-align: center;
        line-height: 50rpx;
        padding: 0 19rpx;
    }
</style>